<template>
  <div id="content">
    <div class="container">
      <div id="content-left">
        <!--        精选文章-->
        <FeaturedArticles></FeaturedArticles>
        <Article></Article>
        <Pagination :total="ArticleAll.total" :current_page="ArticleAll.current_page"
                    :num_pages="ArticleAll.num_pages"></Pagination>
      </div>
      <div id="content-right">
        <SiteInformation></SiteInformation>
        <Feedback></Feedback>
      </div>
    </div>
  </div>
</template>

<script>
import FeaturedArticles from './FeaturedArticles'
import Article from './Article'
import SiteInformation from './SiteInformation'
import Feedback from './Feedback'
import {mapActions, mapState} from 'vuex'

export default {
  name: "Home",
  components: {
    FeaturedArticles,
    Article,
    SiteInformation,
    Feedback
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState('Home', ['ArticleAll'])
  },
  methods: {
    ...mapActions('Home', ['getArticleAll']),
    ...mapActions('Rotation', ['getRotation'])
  },
  mounted() {
    this.getArticleAll()
    // 获取轮播图
    this.getRotation({
      type: this.$route.meta.type
    })
  },
}
</script>

<style lang="less">
#content {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: 700px;
  padding-top: 20px;

  .container {
    height: 80%;
    width: 80%;

    /*内容区域中左边内容的头部*/

    .content-head {
      border-bottom: 1px #f0eeee solid;
      padding: 15px 20px;
      border-radius: 5px 5px 0 0;

      h2 {
        font-size: 20px;
      }
    }

    /*内容区域中左边内容的主部*/

    .content-body {
      border-radius: 0 0 5px 5px;
      min-height: 100px;
      width: 100%;
      box-sizing: border-box;
    }

    /*内容区域中左边内容*/

    #content-left {
      float: left;
      width: 68%;

      .el-pagination {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
      }
    }

    /*内容区域中右边内容*/

    #content-right {
      float: right;
      width: 30%;
    }
  }
}
</style>